<template>
  <div>
    <Card class="marginB10 ">
      <div class="TJ_big">
        <div class="TJ_title f_bold f_16 lineH34 w150" >
          申请人资质
          <span class="cRed">*</span>
        </div>
        <div class="TJ_box">
          <div class="marginB20">
            <Button
              :type="reg_people_type==1?'primary':'default'"
              :ghost="reg_people_type==1"
              size="large"
              class="marginR20"
              style="width:180px;"
              @click="twRr(1)"
            >
              <Icon
                type="md-checkmark-circle-outline"
                size="18"
                class="relative marginR5"
                v-show="reg_people_type==1"
              />企业
            </Button>
            <Button
              :type="reg_people_type==2?'primary':'default'"
              :ghost="reg_people_type==2"
              size="large"
              style="width:180px;"
              @click="twRr(2)"
            >
              <Icon
                type="md-checkmark-circle-outline"
                size="18"
                class="relative marginR5"
                v-show="reg_people_type==2"
              />个体工商户
            </Button>
          </div>
        </div>
      </div>

      <div v-show="reg_people_type==2">
        <div class="clearBoth marginB20">
          <div class="TJ_title f_bold f_16 lineH34 w150" >
            身份证复印件
            <span class="cRed">*</span>
            <div class="cRed f_normal f_14 marginR10 lineH1">* pdf 或 图片</div>
            <div class="cRed f_normal f_14 marginR10 lineH2">文件 ≤2MB</div>
          </div>
          <div class="TJ_box borderNone">
            <div>
              <div class="overflowH SQ_One_R">
                <div class="marginR30 pullLeft pointer textCenter tran3 cBlue">
                  <div class="JC_img relative overflowH" >
                    <input type="file" accept=".pdf,.jpg,.jpeg,.png" class="InputFileBox" @change="upPdfB($event)" />
                    <div v-show="!$app.judgeData(idcard_path.file_url)">
                      <Icon
                        type="ios-add-circle-outline"
                        class="marginB5"
                        style="padding-top:30px;"
                        size="30"
                      />
                      <div class="f_12">正反面复印件</div>
                      <div class="f_12">（需签字）</div>
                    </div>
                    
                    <i class="iconfont iconpdf f_40 cBlue relative" style="top:25px;" v-show="$app.judgeData(idcard_path.file_url)"></i>
                  </div>
                  <Button type="info" ghost class="marginB10 marginT10" @click="$app.openWindow(idcard_path.file_url)" v-show="$app.judgeData(idcard_path.file_url)" size="small">
                    查看文件
                  </Button>

                </div>
                
                <div class="JC_img tran3 pointer  relative overflowH" @click="$app.openWindow(KY_p2s)" >
                  <img :src="KY_p2" class="InputShowImg contain bgWhite" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="clearBoth">
        
        <div class="TJ_title f_bold f_16 lineH34 w150" >
          上传营业执照
          <span class="cRed">*</span>
          <div class="cRed f_normal f_14 marginR10 lineH1">* pdf 或 图片</div>
          <div class="cRed f_normal f_14 marginR10 lineH2">文件 ≤2MB</div>
        </div>
        <div class="TJ_box borderNone">
          <div class="cRed marginB10 lineH2">
            企业经营范围如涉及商标代理、知识产权咨询及代理等，商标局仅受理4506类注册，其余类别不予受理。
          </div>
          <div class="marginB20">
            <div class="overflowH SQ_One_R">
              <div class="marginR30 pullLeft pointer textCenter tran3 cBlue">
                <div class="JC_img relative overflowH">
                  <input type="file" accept=".pdf,.jpg,.jpeg,.png" class="InputFileBox" @change="upPdfA($event)" />
                  <div v-show="!$app.judgeData(business_license_path.file_url)">
                    <Icon
                      type="ios-add-circle-outline"
                      class="marginB5"
                      style="padding-top:30px;"
                      size="30"
                    />
                    <div class="f_12">{{tipsTt()}}</div>
                  </div>
                  <i class="iconfont iconpdf f_40 cBlue relative" style="top:25px;" v-show="$app.judgeData(business_license_path.file_url)"></i>
                </div>
                <Button
                  type="info"
                  ghost
                  class="marginB10 marginT10"
                  v-show="$app.judgeData(business_license_path.file_url)"
                  @click="$app.openWindow(business_license_path.file_url)"
                  size="small"
                >
                  查看文件
                </Button>
              </div>

              <div class="JC_img tran3 pointer relative overflowH" @click="$app.openWindow(Y1_2s)">
                <img :src="Y1_2" class="InputShowImg contain bgWhite" />
              </div>
            </div>
          </div>
        </div>
      </div>
      

      
      

      <!-- 营业执照  -->
      <div class="clearBoth">
        <div class="TJ_title f_bold f_16 lineH34 w150" >
          营业执照
          <span class="cRed">*</span>
        </div>
        <div class="TJ_box borderNone">
          <div class="marginB20">
            <Input
              placeholder="请输入统一社会信用代码"
              clearable
              style="width: 300px"
              size="large"
              ref="business_license_number"
              v-model="business_license_number"
            />
          </div>
        </div>
      </div>


      <div class="clearBoth">
        <div class="TJ_title f_bold f_16 lineH34 w150" >
          {{reg_people_type==1?'公司名称':'申请人名称'}}
          <span class="cRed">*</span>
        </div>
        <div class="TJ_box borderNone">
          <div class="marginB20">
            <Input
              :placeholder="(reg_people_type==1?'请输入公司名称':'请输入申请人名称/个体户名称')"
              clearable
              style="width: 300px"
              size="large"
              ref="reg_people_name"
              v-model="reg_people_name"
              class="marginR20"
            />
          </div>
        </div>
      </div>
      <!-- 个人身份证  -->
      <div class="clearBoth" v-show="reg_people_type==2">
        <div class="TJ_title f_bold f_16 lineH34 w150" >
          身份证号
          <span class="cRed">*</span>
        </div>
        <div class="TJ_box borderNone">
          <div class="marginB20">
            <Input
              placeholder="请输入申请人身份证"
              clearable
              style="width: 300px"
              size="large"
              ref="idcard"
              v-model="idcard"
            />
          </div>
        </div>
      </div>


      <div class="clearBoth">
        <div class="TJ_title f_bold f_16 lineH34 w150" >
          {{(reg_people_type==1?'营业执照地址':'申请人地址')}}
          <span class="cRed" >*</span>
        </div>
        <div class="TJ_box borderNone">
          
          <div class="marginB20">
            <Select class="  marginR10" size="large" v-model="business_license_province_code" ref="business_license_province_code" placeholder="请选择省份" @on-change="business_license_province_code_Fun()" style="width:145px">
              <Option v-for="(val,i) in shengList" :value="val.code" :key="i">{{val.name}}</Option>
            </Select>
            <Select class=" " size="large" v-model="business_license_city_code" ref="business_license_city_code" placeholder="请选择市区"  @on-change="business_license_city_code_Fun()" v-show="$app.judgeData(cityList)" style="width:145px">
              <Option v-for="(val,i) in cityList" :value="val.code" :key="i">{{val.name}}</Option>
            </Select>
          </div>

          <div class="marginB20">
            <Input
              :placeholder="(reg_people_type==1?'请输入营业执照地址':'请输入通讯地址')"
              clearable
              style="width: 300px"
              size="large"
              ref="business_license_detail_address"
              v-model="business_license_detail_address"
            />
          </div>

        </div>
      </div>


      


      

      <div class="clearBoth">
        <div class="TJ_title f_bold f_16 lineH34 w150" >
          上传委托书
          <span class="cRed">*</span>
          <div class="cRed f_normal f_14 marginR10">* 图片 ≤2MB</div>
          <div class="marginT10">
            <Button type="primary" class="marginR10" @click="gonW" size="small" ghost shape="circle" >
              委托书下载
            </Button>
          </div>
        </div>
        <div class="TJ_box borderNone ">
          <div>
            <div class="cRed marginB10 lineH2">请使用委托书默认的代理机构信息。</div>
            <div class="overflowH SQ_One_R">
              <div class="marginR30 pullLeft pointer textCenter tran3 cBlue">
                <div class="JC_img relative overflowH">
                  <input
                    type="file" 
                    accept="image/*"
                    class="InputFileBox"
                    @change="wtS_Up($event,'attorney_path')"
                  />
                  <div v-show="!$app.getVal_fileUrl(attorney_path)">
                    <Icon
                      type="ios-add-circle-outline"
                      class="marginB5"
                      style="padding-top:30px;"
                      size="30"
                    />
                    <div class="f_12">{{tipsTt()}}</div>
                  </div>
                  <img
                    :src="$app.getVal_fileUrl(attorney_path)"
                    v-show="$app.getVal_fileUrl(attorney_path)"
                    class="InputShowImg contain bgWhite"
                  />
                </div>
                <Button
                  type="info"
                  ghost
                  class="marginB10 marginT10"
                  v-show="$app.getVal_fileUrl(attorney_path)"
                  @click="$app.openWindow($app.getVal_fileUrl(attorney_path))"
                  size="small"
                >
                  查看文件
                </Button>
              </div>

              <div class="JC_img tran3 pointer relative overflowH" @click="$app.openWindow(Y1_1s)">
                <img :src="Y1_1" class="InputShowImg contain bgWhite" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </Card>
  </div>
</template>


<script>
import Y1_2 from "@$@/img/y1_2.png";
import Y1_2s from "@$@/img/qy_yyzz.jpg";
import Y1_1 from '@$@/img/y1_1.png';
import Y1_1s from '@$@/img/shili.jpeg';
import KY_p2 from '@$@/img/kY_p2.png';
import KY_p2s from '@$@/img/kY_p2s.jpg';


import tm_b2 from "@$@/js/$common/tm_b2";

export default {
  name: "b2",
  components: {},
  data() {
    let data = {
      idcard:"",//个人身份证
      business_license_number: "", //营业执照
      
      
      //营业执照 pdf
      business_license_path: {
        file_url: "", //前端展示路径
        file_path: "" //上传给后台的路径
      },
      //身份证文件路径 pdf
      idcard_path:{
        file_url: "", //前端展示路径
        file_path: "" //上传给后台的路径
      },

      //营业执照 图片
      business_license_img_path: {
        file_url: "", //前端展示路径
        file_path: "" //上传给后台的路径
      },
      //身份证文件路径 图片
      idcard_img_path:{
        file_url: "", //前端展示路径
        file_path: "" //上传给后台的路径
      },
    };
    //模板下载
    let mT = {
      reg_people_name: "", //申请人名称,公司/个人名称

      //上传委托书
      attorney_path: {
        file_url: "", //前端展示路径
        file_path: "" //上传给后台的路径
      }
    };
    let add = {
      shengList: $app.getLocal('root_cpcAreaList'),//省列表 读本地的存储，这个东西 N年不会变一次

      cityList: [],//市列表=》接口返回
      business_license_province:'',//省份名称 中文汉字
      business_license_province_code:'',//省份代码
      business_license_city:'',//城市名称 中文汉字
      business_license_city_code:'',//城市代码
      business_license_detail_address:'',//地址(短地址)
    };

    let tool = {
      //弹框图片 看看
      Y1_2,Y1_2s,
      Y1_1,Y1_1s,
      KY_p2,KY_p2s,

      reg_people_type: 1 //1企业2个体工商户
    };
    return Object.assign(data, mT, add, tool);
  },
  mounted() {
    let { type } = this;
  },
  methods: {


    //申请人 select 框监听 省
    business_license_province_code_Fun(callBack){
      let{
        business_license_province_code,//省 代码
      }=this;

      this.cityList=[];//清空 市列表

      // 省不为空值，市才赋值
      if($app.judgeData(business_license_province_code)) {
        // 专利 地区联动=》先存一次
        $ajax.cpcAreaList(business_license_province_code,resData=>{
          this.$set(this,'cityList',resData);//市区赋值
          callBack instanceof Function && callBack();
        });
      }

      this.business_license_province=this.shengList_Fun(business_license_province_code);//赋值
      console.log('申请 = 省 = ',this.business_license_province,business_license_province_code);

    },

    // 省 中文名 匹配
    shengList_Fun(codeT){
      let {
        shengList//省 列表
      }=this;
      for(let t=0; t<shengList.length;t++){
        if(shengList[t].code==codeT){
          return shengList[t].name;//退出本周循环 输出 国家名
        }
      }
    },

    //申请人 select 框监听 市
    business_license_city_code_Fun(){
      let{
        business_license_city_code,//常住地 代码
      }=this;

      this.business_license_city=this.cityList_Fun(business_license_city_code);//赋值

      console.log('申请 = 市 = ',this.business_license_city,business_license_city_code)
    },
    // 市 中文名 匹配
    cityList_Fun(codeT){
      let {
        cityList//市 列表
      }=this;

      // 判断城市列表是否，为空
      if($app.judgeData(cityList)){
        for(let t=0; t<cityList.length;t++){
          if(cityList[t].code==codeT){
            return cityList[t].name;//退出本周循环 输出 国家名
          }
        }
      }else{// 空城市 返回空名字
        return '';
      }
    },

    //企业 个体工商切换 数据初始化：
    twRr(num){

      if(this.reg_people_type==num){
        //自己点击自己
      }else{
        this.reg_people_type=num;

        //初始化所有值 
        this.reg_people_name='';
        this.business_license_number='';
        this.idcard='',//个人身份证

        //营业执照
        this.business_license_path={
          file_url: "", //前端展示路径
          file_path: "" //上传给后台的路径
        };

        //身份证
        this.idcard_path={
          file_url: "", //前端展示路径
          file_path: "" //上传给后台的路径
        };

        //委托书
        this.attorney_path={
          file_url: "", //前端展示路径
          file_path: "" //上传给后台的路径
        };


        //省市区数据清空
        this.initFirstData_address();
        

      }
    },



    // 提示语切换
    tipsTt(){
      let {
        reg_people_type
      }=this;
      return (reg_people_type==1?'需盖公章':'需签字');
    },

    

    //上传委托书
    wtS_Up(e,xu) {
      let file = e.target.files[0]; //选中的文件
      //格式判断
      $app.suffix.jpgPng(e,file,2,()=>{

        let reader = new FileReader();
        reader.readAsDataURL(file);
        //这里把一个文件用base64编码,具体什么是base64编码,我将稍后在不久的文章中介绍
        reader.onload = (e)=>{
          let image = new Image();
          image.src = e.target.result;
          //获取编码后的值,也可以用this.result获取
          image.onload = ()=>{
            let drawWidth = image.naturalWidth;
            let drawHeight = image.naturalHeight;
            if($app.imgMinSizeNum<=drawWidth && $app.imgMinSizeNum<=drawHeight){
              $app.selectFileImage(null,null,file, 15, resData => {
                this[xu]= resData;
              });

            }else{
              $app.alert('失败原因: 委托书像素(宽/高)不符合要求(宽高不能大于'+$app.imgMaxSizeNum+'，小于'+$app.imgMinSizeNum+')','委托书文件提交失败');
            }
          }
        };
      });
    },

    //省市区数据清空
    initFirstData_address(){
      this.cityList= [];//市列表=》接口返回
      this.business_license_province='';//省份名称 中文汉字
      this.business_license_province_code='';//省份代码
      this.business_license_city='';//城市名称 中文汉字
      this.business_license_city_code='';//城市代码
      this.business_license_detail_address='';//地址(短地址)
    },

    //上传 营业执照pdf 或 图片 -商标上传-专用
    upPdfA(e){
      
      let file = e.target.files[0]; //选中的文件

      let that=this;

      //格式判断 typeJ:1pdf,2图片
      $app.suffix.imgPdf_tm(e,file,2,(typeJ)=>{
        
        if(typeJ==1){// pdf
          $ajax.tmBusinessLicence(file, resData => {
            tm_b2.gonRi(that,resData);//赋值
          });
        }else{ //图片
          //1营业执照..3身份证... 21 企业认证(更多数字请看文档)
          $app.selectFileImage(null,null,file, 1, resData => {
            tm_b2.gonRi(that,resData);//赋值
          });
        }

      });
    },
    
    //上传 身份证pdf -商标上传-专用
    upPdfB(e){
      let file = e.target.files[0]; //选中的文件
      let that=this;
      //格式判断
      //格式判断 typeJ:1pdf,2图片
      $app.suffix.imgPdf_tm(e,file,2,(typeJ)=>{

        if(typeJ==1){//pdf
          $ajax.tmIdCardXx(file, resData => {
            tm_b2.rMpW(that,resData);//赋值
          });
        }else{//图片
          //1营业执照..3身份证... 21 企业认证(更多数字请看文档)
          $app.selectFileImage(null,null,file, 3, resData => {
            tm_b2.rMpW(that,resData);//赋值
          });
        }
        
      });
    },
    

    //委托书下载
    gonW(){
      let that=this;
      let {
        reg_people_name,
        business_license_detail_address,//短地址
        
        business_license_province,
        business_license_province_code,
        business_license_city,
        business_license_city_code,

        reg_people_type,
      }=that;


      let {
        xTlex:tm_type,//1文字，2图形，3文字及图形
        xPiw:upload_type,//1自动生成,2手动上传
        zName1, //商标名称 纯文字
        img_path:{
          file_path:tm_img_path
        }
      }=this.$parent.$refs['B1'];

      let company_name=$app.delSpace(reg_people_name);//删除空格


      if(tm_type==1 && upload_type==1 && !$app.judgeData(zName1)){
        that.$Message.error({content:'请输入商标名称'});
        that.$parent.$refs['B1'].$refs['zName1'].focus();
      }else{

        

        if(!$app.judgeData(company_name)){
          that.$Message.error({content:'请输入'+(reg_people_type==1?'公司名称':'申请人名称')});
          that.$refs['reg_people_name'].focus();

          return
        }

        if(!$app.judgeData(business_license_province)||!$app.judgeData(business_license_province_code)){

          if(!$app.judgeData(business_license_province)){
            that.$Message.error({content:'请选择省份'});
          }else{
            that.$Message.error({content:'省份代码不能为空'});
          }

          // 聚焦
          that.$nextTick(() => {
              that.$refs['business_license_province_code'].isFocused = true;
              that.$refs['business_license_province_code'].visible = true;
          });

          return
        }
        
        if(!$app.judgeData(business_license_city)||!$app.judgeData(business_license_city_code)){

          /**
           * 省份代码：以下的没有市
           * 710000 台湾
           * 810000 香港
           * 820000 澳门
          */
          if(business_license_province_code=='710000'||business_license_province_code=='810000'||business_license_province_code=='820000'){
              //无需处理
          }else{
            if(!$app.judgeData(business_license_city)){
              that.$Message.error({content:'请选择市区'});
            }else{
              that.$Message.error({content:'市区代码不能为空'});
            }

            // 聚焦
            that.$nextTick(() => {
                that.$refs['business_license_city_code'].isFocused = true;
                that.$refs['business_license_city_code'].visible = true;
            });
            return
          }
        }
        
        if(!$app.judgeData(business_license_detail_address)){
          that.$Message.error({content:'请输入'+(reg_people_type==1?'营业执照地址':'申请人地址')});
          that.$refs['business_license_detail_address'].focus();

          return
        }

        if(upload_type==2 && !$app.judgeData(tm_img_path)){
          that.$Message.error({content:'请上传商标图样'});

          return
        }
        
        

        let tm_name='';
        if(tm_type==1 && upload_type==1){
          tm_name=zName1;
        }

        $ajax.tmAttorney({
          tm_type,
          tm_img_path,
          company_name,
          license_address:(business_license_province+business_license_city+business_license_detail_address),
          upload_type,
          tm_name
        },resData=>{
          $app.openWindow(resData.file_url);
        });

        
        
      }


    }
  }
};
</script>

